<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red{background: red;}
			.green{background: green;}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 插值语法 -->
			<p>{{msg}}</p>
			<!-- vue的指令 -->
			<p v-html="msg"></p>
			<p v-text="msg"></p>
			<!-- 循环指令-->
			<ul>
				<li :key="i" v-bind:class="cn" v-for="(item,i) in list">{{i}}-{{item}}</li>
			</ul>
			<!-- 分支指令 -->
			<span v-if="state==0">星期日</span>
			<span v-else-if="state==1">星期一</span>
			<span v-else-if="state==2">星期二</span>
			<span v-else-if="state==3">星期三</span>
			<span v-else-if="state==4">星期四</span>
			<span v-else-if="state==5">星期五</span>
			<span v-else-if="state==6">星期六</span>
			<span v-else>错误数字</span>
			<!-- 显示隐藏 -->
			<p v-if="flag">这是一个段落1</p>
			<p v-show="flag">这是一个段落2</p>
			<button v-bind:title="msg" v-on:click="clickFn" type="button">按钮</button>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		let vm = new Vue({
			el:"#app",		// 要管理的页面容器
			data:{			// 在页面容器中需要使用的数据
				msg:"<em>hello VUE</em>",
				list:["张三","李四","王二","赵五"],
				state:7,
				flag:false,
				cn:"red"
			},
			methods:{
				clickFn(){
					this.list.push("hello")
				}
			}
		});
		
	</script>
</html>
